<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <link rel="stylesheet" href="css_three.css">
</head>
<body>
    <h1>css选择器</h1>
    <h2>通用选择器</h2>
  <div id="main">ID选择器</div>
  <p class="new_title">类选择器</p>
  <h3>元素选择器</h3>
  <p data-bind>"属性选择器":属性名"data-bind"</p>
  <p title="abc">属性选择器：title值为“abc”</p>
  <p title="ab de">属性选择器：title值为“de”</p>
  <p title="xyz-de">属性选择器：title值似“xyz”</p>
  <a href="#">链接1</a>
  <a href="#"title>链接2</a>
  <ul>
    <li>背景</li>
    <li>改变</li>
    <li>颜色</li>
  </ul>
  姓名：<input type="text">
  籍贯：<input type="text">
  <div>
    <pre>第一个pre块</pre>
    <pre>第二个pre块</pre>
  </div>
  <div>
    <h1>伪元素</h1>
    <p>
      第一行<br>
      第二行<br>
    </p>
  </div>

  <div>
    <span>后代选择器</span>
    <pre>后代选择器</pre>
  </div>

  <div>
    <p>
      <span>
        子元素选择器
      </span>
      <pre>子元素选择器</pre>
    </p>
  </div>

  <pre>相邻兄弟选择器</pre><span>相邻兄弟</span><span>普通兄弟</span><span>普通兄弟</span><span>普通兄弟</span>
  <pre>相邻兄弟选择器</pre><span class="bro">相邻兄弟</span><span class="bro">普通兄弟</span><span class="bro">普通兄弟</span><span class="bro">普通兄弟</span>
</body>
</html>